<template>
    <div>
        <el-container>
            <el-header>
                <p>查询</p>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="搜索：">
                        <el-input v-model="formInline.orderId" placeholder="输入单号进行搜索"></el-input>
                    </el-form-item>   
                    <el-form-item label="时间：">
                        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" 
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item> 
                    <el-form-item label="支付方式：">
                        <el-select v-model="formInline.payWay" placeholder="请选择支付方式">
                            <el-option label="全部" value="quanbu"></el-option>
                            <el-option label="微信支付" value="weixinzhifu"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="桌位区域：">
                        <el-select v-model="formInline.tableArea" placeholder="请选择桌位区域">
                            <el-option label="A区" value="Aqu"></el-option>
                            <el-option label="B区" value="Bqu"></el-option>
                        </el-select>
                    </el-form-item>                     
                </el-form>
            </el-header>
            <!-- 菜品列表 -->
            <el-main>
                <!-- 明细数据 -->
                <p class='clear' id='detail'>
                    <span>明细数据</span>
                    <el-button type="primary" round>导出</el-button>
                </p>
                <!-- 表格 -->
                <el-table ref="multipleTable":data="tableData" tooltip-effect="dark" :cell-style="{border:'1px solid #DCDCDC'}"
                :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column prop="orderId" label="单号" width="150" align='center'></el-table-column>
                    <el-table-column prop="area" label="桌位区域" width="110" align='center'></el-table-column>
                    <el-table-column prop="tableId" label="桌位编号" width="100" align='center'></el-table-column>
                    <el-table-column prop="payWay" label="付款方式" width="120" align='center'></el-table-column>
                    <el-table-column prop="price" label="金额" width="107" align='center'></el-table-column>
                    <el-table-column prop="preferential" label="优惠额度" width="100" align='center'></el-table-column>
                    <el-table-column prop="person" label="收银员" width="120" align='center'></el-table-column>
                    <el-table-column prop="time" label="时间" width="180" align='center'></el-table-column>
                    <el-table-column prop="userName" label="用户名" width="120" align='center'></el-table-column>
                    <el-table-column prop="payNum" label="付款凭证号" width="150" align='center'></el-table-column>
                </el-table>
                <!-- 页码 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                :page-sizes="[5,10,15,20,25,30]" :page-size="5" layout="total,sizes,prev, pager, next, jumper" :total="400">
                </el-pagination>
            </el-main>
        </el-container>
    </div>
</template>
<style scoped lang='less'>
    .clear::after{
        content: '';
        display: block;
        clear: both;
    }
    .el-header{
        border: 1px solid #DCDCDC;
        height: 200px !important;
        padding: 0;
        p{
            background: #F2F2F2;
            padding: 15px;
            padding-bottom: 10px;
            margin-bottom: 25px;
        }
        .el-form{
            margin-left:50px;
            .el-form-item:first-child{
                display: block;
            }
            .el-form-item{
                margin-right: 60px;
            }
        }
    }
    .el-main{
        margin-top: 15px;
        border: 1px solid #DCDCDC;
        padding: 18px 10px 20px 10px;
        #detail{
            background: #F2F2F2;
            line-height: 35px;
            padding: 15px;
            padding-bottom: 10px;
            margin-bottom: 15px;
            clear: both;
            .el-button{
                float: right;
            }
        }
    }
    .el-table{
        margin-bottom: 30px;
    }
    .el-pagination{
        text-align: center;
    }
</style>
<script>
export default {
    data(){
        return{
            formInline:{
                orderId:'',
                time:'',
                payWay:'',
                tableOrder:''
            },
            // 收银流水数据
            tableData:[
                {
                    orderId:'123456',
                    area:'A区',
                    tableId:'001',
                    payWay:'线上付款',
                    price:'12.50',
                    preferential:'-5',
                    person:'1001',
                    time:'2022-3-8',
                    userName:'小程序',
                    payNum:'1232132132'
                },
                {
                    orderId:'123456',
                    area:'A区',
                    tableId:'001',
                    payWay:'线上付款',
                    price:'12.50',
                    preferential:'-5',
                    person:'1001',
                    time:'2022-3-8',
                    userName:'小程序',
                    payNum:'1232132132'
                },
                {
                    orderId:'123456',
                    area:'A区',
                    tableId:'001',
                    payWay:'线上付款',
                    price:'12.50',
                    preferential:'-5',
                    person:'1001',
                    time:'2022-3-8',
                    userName:'小程序',
                    payNum:'1232132132'
                },
                {
                    orderId:'123456',
                    area:'A区',
                    tableId:'001',
                    payWay:'线上付款',
                    price:'12.50',
                    preferential:'-5',
                    person:'1001',
                    time:'2022-3-8',
                    userName:'小程序',
                    payNum:'1232132132'
                },
                {
                    orderId:'123456',
                    area:'A区',
                    tableId:'001',
                    payWay:'线上付款',
                    price:'12.50',
                    preferential:'-5',
                    person:'1001',
                    time:'2022-3-8',
                    userName:'小程序',
                    payNum:'1232132132'
                },
                {
                    orderId:'123456',
                    area:'A区',
                    tableId:'001',
                    payWay:'线上付款',
                    price:'12.50',
                    preferential:'-5',
                    person:'1001',
                    time:'2022-3-8',
                    userName:'小程序',
                    payNum:'1232132132'
                },
                {
                    orderId:'123456',
                    area:'A区',
                    tableId:'001',
                    payWay:'线上付款',
                    price:'12.50',
                    preferential:'-5',
                    person:'1001',
                    time:'2022-3-8',
                    userName:'小程序',
                    payNum:'1232132132'
                }
            ]
        }
    },
    methods: {
        // 批量选择
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 预销量
        onSale(){

        },
        // 停售
        onDiscontinued(){

        },
        // 估清
        onEstimate(){

        },
        // 每页多少条数据
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 当前页
        handleCurrentChange(val) {
           console.log(`当前页: ${val}`);
        }
    }
}
</script>